<template>
    <div class="movie-show">
        <div class="movie-info">
            <div class="movie-title ellipsis">
                <span class="title" v-if="movieshow && movieshow.nm">{{movieshow.nm}}</span>
                <span class="grade">
                    <span class="score" v-if="movieshow && movieshow.sc">
                        {{movieshow.sc}}
                        <span class="small">分</span>
                    </span>
                </span>
            </div>
            <div class="movie-desc ellipsis" v-if="movieshow && movieshow.desc">{{movieshow.desc}}</div>
        </div>

        <van-tabs @click="onClick" v-if="movieshow && movieshow.shows" swipe-threshold="1">
            <van-tab v-for="item in movieshow.shows" :key="item.showDate" :title="item.showDate" >
                <div class="activity-section">
                    <div class="vip-tips">
                        <a href="javascript:void(0)">
                            <div class="lable">折扣</div>
                            <div class="lable-text">开卡享优惠</div>
                            <div class="process">29.9元起开卡</div>
                        </a>
                    </div>
                </div>

                <show-list :showlist="showList" ></show-list>

                <div class="no-seat" v-show="change===true">
                    <div class="icon today-no-movie"></div>
                    <div class="text">今日场次已映完</div>
                     <!-- <div class="next-date-button">点击查看03月11日场次</div> -->
                </div> 
            </van-tab>
        </van-tabs>

        
    </div>
</template>

<script>
import ShowList from '@/components/ShowList.vue'
import { mapState } from 'vuex'

export default {
    props:{
        movieshow:{Object,Array}
    },
    data(){
        return{
            showList:[],
            change:false,
        }
    },
    created(){
        this.showList=this.$store.state.movieShowData.shows[0].plist
    },
    methods:{
        onClick(name){
            if(this.movieshow && this.movieshow.shows){
                // console.log(name)
                this.showList=this.movieshow.shows[name].plist
            }
        },
    },
    components:{
        ShowList,
        ...mapState(["movieShowData"])
    },
    watch:{
        '$store.state.movieShowData'(){
            // console.log('改变')
            // 当父组件的数据发生改变时子组件随着更新数据
            this.showList=this.$store.state.movieShowData.shows[0].plist
        },
        showList:{
            handler(newValue){
                // console.log('new',newValue)
                // console.log('old',oldValue)
                if(newValue.length==0){
                    this.change=true
                }else{
                    this.change=false
                }
            }
        }
    },
    beforeRouteLeave(to,from,next){
        this.showList=null
        next()
    },
}
</script>

<style lang="less" scoped>
/deep/ .van-overlay{
    position: relative;
}
/deep/ .van-tab{
    width: 115px;
    margin-left: 4.5px;
    padding: 0px;
}
/deep/ .van-tabs__line {
    bottom: 0px;
    width: 115px;
    height: 1px;
}
/deep/ .van-tabs__nav--line {
    padding-bottom: 0px;
} 
.movie-show{
    background: #fff;
    .movie-info{
        padding: 11px 15px;
        text-align: center;
        .ellipsis {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .movie-title{
            height: 24px;
            line-height: 24px;
            margin-right: 5px;
            .title{
                font-size: 17px;
                color: #333;
                font-weight: 700; 
            }
            .grade{
                color: #ffb400;
                .score{
                    font-size: 16px;
                    font-weight: 700;
                    .small{
                        font-size: 10px;
                        font-weight: 700;
                    }
                }
            }
        }
        .movie-desc{
            margin-top: 2px;
            height: 18.5px;
            line-height: 18.5px;
            font-size: 13px;
            color: #999;
        }
    }


    .activity-section{
        .vip-tips{
            padding: 0 15px;
            height: 42px;
            line-height: 42px;
            margin-top: -1px;
            background-color: #fff5ea;
            &>a{
                display: flex;
                align-items: center;
                .lable{
                    flex: 0 0 auto;
                    border-radius: 2px;
                    font-size: 10px;
                    line-height: 15px;
                    height: 15px;
                    width: 34px;
                    text-align: center;
                    color: #fff;
                    margin-right: 10px;
                    background-color: #ff941a;
                }
                .lable-text{
                    color: #ff9600;
                    flex: 1 1 auto;
                    font-size: 12px;
                }
                .process{
                    flex: 0 0 auto;
                    line-height: 42px;
                    color: #999;
                    font-size: 12px;
                    &::after{
                        display: inline-block;
                        content: "";
                        width: 7px;
                        height: 7px;
                        border-left: 1px solid #ccc;
                        border-top: 1px solid #ccc;
                        -webkit-transform: rotate(135deg);
                        transform: rotate(135deg);
                    }
                }
            }
        }
    }

    .no-seat{
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        height: 230px;
        background-color: #f0f0f0;
        .today-no-movie{
            background: url('../assets/img/today-no-show.png') no-repeat 50%;
            background-size: contain;
        }
        .icon{
            display: inline-block;
            margin: 50px auto 0;
            width: 77.5px;
            height: 71.5px;
        }
        .text{
            margin-top: 12px;
            line-height: 1;
            font-size: 16px;
            color: #acacac;
        }
        // .next-date-button{
                // margin: 20px auto 0;
                // border-radius: 5px;
                // width: 170px;
                // height: 35px;
                // line-height: 35px;
                // font-size: 14px;
                // color: #f03d37;
                // border: 1px solid rgba(0,0,0,.15);
                // background-color: #fff;
                // text-align: center;
        // }
    }
}
</style>